<!--头部版块-->
<app-page-header [pageHeaderInfo]="pageHeaderInfo"></app-page-header>

<div class="normal-table-wrap">
  <app-card-table-wrap ng-if="!showEditForm" [tableTitle]="'查询表格'" (reload)="reloadTable()" [btnTpl]="tableBtns">
    <app-ant-table
      (selectedChange)="selectedChecked($event)"
      [checkedCashArrayFromComment]="checkedCashArray"
      (changePageSize)="changePageSize($event)"
      (changePageNum)="getDataList($event)"
      [tableConfig]="tableConfig"
      [tableData]="dataList"
    ></app-ant-table>
    <ng-template #operationTpl let-longText="longText" let-id="id">
      <!-- <span class="operate-text" (click)="check(longText)">查看</span> -->
      <!--添加了权限的写法-->
      <!-- <span *appAuth="ActionCode.FireSysSettingDel" class="operate-text" (click)="del(id)">删除</span>-->
      <span class="operate-text" (click)="del(id)">删除</span>
      <span class="operate-text" (click)="edit(id)">编辑</span>
    </ng-template>
  </app-card-table-wrap>
  <nz-card ng-if="showEditForm" [nzBodyStyle]="{ 'padding-bottom': 0 }" class="m-b-10">
    <form nz-form [formGroup]="formdata" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-label [nzSpan]="6" [nzFor]="">名称</nz-form-label>
        <nz-form-control [nzSm]="10" [nzXs]="24">
          <input nz-input placeholder="请输入" name="ruleName" formControlName="name" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="6" [nzFor]="">描述</nz-form-label>
        <nz-form-control [nzSm]="10" [nzXs]="24">
          <input nz-input placeholder="请输入" name="desc" formControlName="comment" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="6">开始时间</nz-form-label>
        <nz-form-control [nzSm]="10" [nzXs]="24">
          <nz-date-picker nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" formControlName="cronStartTime"></nz-date-picker>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="6" [nzFor]="">执行频率</nz-form-label>
        <nz-form-control [nzSm]="10" [nzXs]="24">
          <nz-select formControlName="perunit">
            <!-- <nz-option nzValue="hour" nzLabel="hour"></nz-option> -->
            <nz-option nzValue="day" nzLabel="day"></nz-option>
            <nz-option nzValue="week" nzLabel="week"></nz-option>
            <nz-option nzValue="month" nzLabel="month"></nz-option>
            <nz-option nzValue="year" nzLabel="year"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <ng-container formGroupName="cronDetail">
        <nz-form-item *ngIf="formdata.get('perunit')?.value === 'week'">
          <nz-form-control [nzOffset]="6" [nzSm]="10" [nzXs]="24">
            <div class="cont-box">
              <ul>
                <li
                  *ngFor="let item of weekDayList"
                  [ngClass]="selectWeek.has(item.value) ? 'cur' : ''"
                  (click)="selectWeek.has(item.value) ? selectWeek.delete(item.value) : selectWeek.add(item.value)"
                >
                  {{ item.label | translate }} {{ formdata.get('week')?.value.indexOf(item.value) }}
                </li>
              </ul>
            </div>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="formdata.get('perunit')?.value === 'year'">
          <nz-form-control [nzOffset]="6" [nzSm]="10" [nzXs]="24">
            <div class="cont-box">
              <ul>
                <li
                  *ngFor="let item of monthlyList"
                  [ngClass]="selectMonth.has(item.value) ? 'cur' : ''"
                  (click)="selectMonth.has(item.value) ? selectMonth.delete(item.value) : selectMonth.add(item.value)"
                >
                  {{ item.label | translate }}
                </li>
              </ul>
            </div>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="formdata.get('perunit')?.value === 'month'">
          <nz-form-control [nzOffset]="6" [nzSm]="10" [nzXs]="24">
            <div class="cont-box">
              <ul>
                <li
                  *ngFor="let item of monthdayList"
                  [ngClass]="selectMonthDay.has(item.value) ? 'cur' : ''"
                  (click)="selectMonthDay.has(item.value) ? selectMonthDay.delete(item.value) : selectMonthDay.add(item.value)"
                >
                  {{ item.label | translate }}
                </li>
              </ul>
            </div>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="formdata.get('perunit')?.value === 'day'">
          <nz-form-control [nzOffset]="6" [nzSm]="4" [nzXs]="24">
            <nz-input-number formControlName="cronDays" [nzPrecision]="0" nzPrecisionMode="cut" nzPlaceHolder="cut off"></nz-input-number>
            days runs
          </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="formdata.get('perunit')?.value !== null" [nzGutter]="16">
          <nz-form-control [nzOffset]="6" [nzSm]="4" [nzXs]="24">
            <nz-select formControlName="cronHours" nzMode="multiple">
              <nz-option *ngFor="let option of hoursList" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
            </nz-select>
            <!-- <nz-time-picker formControlName="afterTime" nzFormat="yyyy-MM-dd HH:mm"></nz-time-picker> -->
          </nz-form-control>
          <nz-form-control [nzSm]="4" [nzXs]="24">
            <nz-select formControlName="cronMinutes" nzMode="multiple">
              <nz-option *ngFor="let option of minuteSecondList" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </ng-container>
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzFor="cronStopTime">结束时间</nz-form-label>
        <nz-form-control [nzSm]="4" [nzXs]="24">
          <nz-select formControlName="cronStopTime">
            <nz-option nzValue="loopEndless" nzLabel="Endless loop"></nz-option>
            <nz-option nzValue="loopCount" nzLabel="After loop times"></nz-option>
            <nz-option nzValue="loopDateTime" nzLabel="After time"></nz-option>
          </nz-select>
        </nz-form-control>
        <nz-form-control *ngIf="formdata.get('cronStopTime')?.value === 'loopCount'" [nzSm]="4" [nzXs]="24">
          在
          <nz-input-number formControlName="loopTimes" [nzPrecision]="0" nzPrecisionMode="cut" nzPlaceHolder="cut off"></nz-input-number>
          次之后
        </nz-form-control>
        <nz-form-control *ngIf="formdata.get('cronStopTime')?.value === 'loopDateTime'" [nzSm]="4" [nzXs]="24">
          <nz-date-picker formControlName="afterTime" nzFormat="yyyy-MM-dd HH:mm"></nz-date-picker>
        </nz-form-control>
      </nz-form-item>
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <button nz-button nzType="primary">提交</button>
        <button class="m-l-10" nz-button nzType="default" (click)="caneal()">cancle</button>
      </nz-form-control>
    </form>

  </nz-card>
</div>
<ng-template #highLightTpl let-name="name">
  <nz-badge nzStatus="processing" [nzText]="name"></nz-badge>
</ng-template>
<ng-template #tableBtns>
  <button (click)="add()" nz-button nzType="primary" class="m-r-8">
    <i nz-icon nzType="plus"></i>
    新建
  </button>
</ng-template>
